<!DOCTYPE html>
<html lang="en">

<head>
    <title>设备详情</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/equipmentDetail.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/echarts.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_header">
            <div class="app_headerLeft" @click="back">
                <span class="iconfont icon-arrow-left-bold"></span>
            </div>
            <div class="app_headerTitle">设备信息</div>
        </div>
        <div class="app_user">
            <div class="app_userLeft">
                <div class="stateDom1">使用中</div>
            </div>
            <div class="app_userRight">
                <div class="title str">ALCW智能型无负压供水设备</div>
                <div class="tabs">
                    <div class="wifi01"><span class="iconfont icon-xinhao"></span>&nbsp;在线</div>
                    <div class="txt">无负压变频供水</div>
                </div>
                <div class="time str">创建时间：2022年07月21日</div>
                <div class="address str"> 所属泵房：奥特莱斯广场泵房1</div>
            </div>
        </div>
        <div class="app_main">
            <div class="app_mainTabs">
                <div :class="[tabs == 1?'app_mainTabsActive':'']" @click="tabs = 1">基础信息</div>
                <div :class="[tabs == 2?'app_mainTabsActive':'']" @click="tabs = 2">统计分析</div>
                <div :class="[tabs == 3?'app_mainTabsActive':'']" @click="tabs = 3">维修记录</div>
                <div :class="[tabs == 4?'app_mainTabsActive':'']" @click="tabs = 4">保养记录</div>
                <div :class="[tabs == 5?'app_mainTabsActive':'']" @click="tabs = 5">附件</div>
            </div>
            <div class="app_mainList" v-show="tabs == 1">
                <div class="app_mainListItem">
                    <div class="label">设备名称</div>
                    <div class="txt str">箱式无负压供水设备</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">设备状态</div>
                    <div class="txt str">运行中</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">设备厂商</div>
                    <div class="txt str">威泉</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">质保期</div>
                    <div class="txt str">5年</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">采购时间</div>
                    <div class="txt str">2022年07月21</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">采购价格</div>
                    <div class="txt str">¥5530</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">联系人</div>
                    <div class="txt str">张三</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">联系电话</div>
                    <div class="txt str">18237494839</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">接入协议</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">联网方式</div>
                    <div class="txt str">MQTT</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">设备类型</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">规格/型号</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">设备功率</div>
                    <div class="txt str">380（V）</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">电压</div>
                    <div class="txt str">0.55-30（kw）</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">额定输出功率</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">最大承受压力</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">运行方式</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainListItem">
                    <div class="label">额定容量</div>
                    <div class="txt str">无</div>
                </div>
                <div class="app_mainTable">
                    <div class="app_mainTableTitle">泵组</div>
                    <div class="app_maintableDemo">
                        <div class="app_maintableDemoTitle">
                            <div>泵组名称</div>
                            <div>别名</div>
                            <div>参数类型</div>
                        </div>
                        <div class="app_maintableDemoitem">
                            <div>高区泵组</div>
                            <div>20-30层</div>
                            <div>电泵</div>
                        </div>
                        <div class="app_maintableDemoitem">
                            <div>中区泵组</div>
                            <div>10-20层</div>
                            <div>电泵</div>
                        </div>
                        <div class="app_maintableDemoitem">
                            <div>低区泵组</div>
                            <div>0-10层</div>
                            <div>电泵</div>
                        </div>
                        <div class="app_maintableDemoitem">
                            <div>高区电柜</div>
                            <div></div>
                            <div>电柜</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app_mainList" v-show="tabs == 2">
                <nut-row :gutter="10">
                    <nut-col :span="6">
                        <div class="flex-content">
                            <div class="flex-contentNum">6</div>
                            <div class="flex-contentTxt">维修/次</div>
                        </div>
                    </nut-col>
                    <nut-col :span="6">
                        <div class="flex-content">
                            <div class="flex-contentNum">0</div>
                            <div class="flex-contentTxt">保养/次</div>
                        </div>
                    </nut-col>
                    <nut-col :span="6">
                        <div class="flex-content">
                            <div class="flex-contentNum">1</div>
                            <div class="flex-contentTxt">用龄/年</div>
                        </div>
                    </nut-col>
                    <nut-col :span="6">
                        <div class="flex-content">
                            <div class="flex-contentNum">3</div>
                            <div class="flex-contentTxt">质保期/年</div>
                        </div>
                    </nut-col>
                </nut-row>
                <div class="app_mainListEcharts" id="mainListEcharts"></div>
                <div class="app_mainListTable">
                    <div class="app_mainListTableDemo">
                        <div class="app_mainListTableDemoTitle">
                            <div>对比项</div>
                            <div>PK结果</div>
                        </div>
                        <div class="app_mainListTableDemoitem">
                            <div>价格</div>
                            <div>战胜了<span style="color: #3979FD;">80%</span>二次供水设备</div>
                        </div>
                        <div class="app_mainListTableDemoitem">
                            <div>使用年限</div>
                            <div>战胜了<span style="color: #3979FD;">20%</span>二次供水设备</div>
                        </div>
                        <div class="app_mainListTableDemoitem">
                            <div>维修频次</div>
                            <div>战胜了<span style="color: #3979FD;">10%</span>二次供水设备</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app_mainList" v-show="tabs == 3">
                <div class="app_mainList_item" v-for="(item,index) in 8">
                    <div class="app_mainList_itemTitle">李治</div>
                    <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                    <div class="app_mainList_itemName">ALCW智能型无负压供水设备变频器故障</div>
                </div>
            </div>
            <div class="app_mainList" v-show="tabs == 4">
                <div class="app_mainList_item" v-for="(item,index) in 8">
                    <div class="app_mainList_itemTitle">李治</div>
                    <div class="app_mainList_itemTime">2022/01/12 16:00</div>
                    <div class="app_mainList_itemName">日常保养</div>
                </div>
            </div>
            <div class="app_mainList" v-show="tabs == 5">
                <div class="app_mainList_item1">
                    <div class="app_mainList_item1Name str">e9095f80ce3ae7307bc698d49c1bcd08.png</div>
                    <div class="app_mainList_itemBtn">下载</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tabs: 1
            },
            mounted() {
                this.getEchartLine()
            },
            methods: {
                back() {
                    window.history.go(-1);
                },
                getEchartLine() {
                    var chartDom = document.getElementById('mainListEcharts');
                    var myChart = echarts.init(chartDom);
                    const chartObserver = new ResizeObserver(() => {
                        myChart.resize()
                    })
                    chartObserver.observe(chartDom)
                    var option;

                    option = {
                        title: {
                            text: '趋势分析',
                            textStyle: {
                                fontSize: 14,
                                fontWeight: 400,
                                color: '#222'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['维修', '保养'],
                            right: 20
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '维修',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [120, 132, 101, 134, 90, 230, 210]
                            },
                            {
                                name: '保养',
                                type: 'line',
                                stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [220, 182, 191, 234, 290, 330, 310]
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                }
            }
        })
    </script>
</body>

</html>